<template>
	<view class="page">
		<!-- 搜索框和定位 -->
		<view class="bar">
			<view class="navbar">
				<view class="searchbar">
					<navigator url="/pages/search/search" class="search-navigator">
						<image class="search" src="../../static/image/search.png"></image>
						<view class="text">请输入要搜索的宝贝名称</view>
					</navigator>
				</view>
				<image class="location" src="../../static/image/location.png"></image>
				<view class="address">中原广告产业园一号楼907</view>
				<!-- <image class="down" src="../../static/image/down.png"></image> -->
				<image src="../../static/image/data.png" style="width: 28rpx;height: 30rpx;position: absolute;right: 0;top: 15rpx;"></image>
			</view>
		</view>
		<!-- 轮播图 -->
		<carousel></carousel>
		<!-- 精品好物热卖专场 -->
		<view class="hot">
			<view class="box">
				<view class="goods-title">
					<view class="title">
						<view class="title-top">精品好物热卖专场</view>
						<view class="title-down">你的专属商品推荐</view>
					</view>
					<view class="goods-btn">
						<view class="more">更多好品</view>
					</view>
				</view>
				<view class="goods-img">
					<view class="goods" v-for="(items,indexs) in list1" :key="indexs">
						<view class="img">
							<image :src="items.url" class="shop"></image>
						</view>
						<view class="price">
							<view class="num">惊爆价￥{{items.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务保障 -->
		<view class="guarantee">
			<view class="sever" v-for="(item,index) in list3" :key="index">
				<image class="sever-img" :src="item.url"></image>
				<view class="sever-title">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="recommend">
			附近店铺
		</view>
		<navigator class="store" url="../shop-detail/shop-detail"  v-for="(item,id) in list" :key="id">
			<image :src="item.url" class="store-img" mode=""></image>
			<view class="store-overall">
				<view class="store-message">
					<view class="store-name">{{item.name}}</view>
					<view class="store-scope">500米内配送，500米外仅支持自取</view>
					<view class="store-price">
						起送￥{{item.MinPrice}} 免配送费 
						<span>￥{{item.ShippingFee}}</span>
					</view>
					<view class="order-num">
						{{item.OrderNum}} 人已下单
					</view>
					<span class="store-type" v-for="items in item.type">{{items}}</span>
				</view>
				<view class="store-right">
					<view class="distance">
						<view class="distance-img"></view>
						<view class="distance-text">
							距离你  1.7k
						</view>
					</view>
					<view class="order">
						<view class="order-text">
							去下单
						</view>
					</view>
					<!-- <view class="order-num">
						{{item.OrderNum}} 人已下单
					</view> -->
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import carousel from "../../components/carousel.vue"
	export default{
		data(){
			return{
				list:[
					{
						id:1,
						url:require("../../static/image/store-img.png"),
						name:'小爱水果商店',
						MinPrice:20,
						ShippingFee:50,
						type:[
							"水果鲜蔬","烟酒","零食","客户满30减5.免配送费"
						],
						OrderNum:126
					},
					{
						id:2,
						url:require("../../static/image/store-img.png"),
						name:'小爱水果商店',
						MinPrice:20,
						ShippingFee:50,
						type:[
							"水果鲜蔬","烟酒","零食","客户满30减5.免配送费"
						],
						OrderNum:126
					},
					{
						id:3,
						url:require("../../static/image/store-img.png"),
						name:'小爱水果商店',
						MinPrice:20,
						ShippingFee:50,
						type:[
							"水果鲜蔬","烟酒","零食","客户满30减5.免配送费"
						],
						OrderNum:126
					},
					{
						id:4,
						url:require("../../static/image/store-img.png"),
						name:'小爱水果商店',
						MinPrice:20,
						ShippingFee:50,
						type:[
							"水果鲜蔬","烟酒","零食","客户满30减5.免配送费"
						],
						OrderNum:126
					},
					{
						id:5,
						url:require("../../static/image/store-img.png"),
						name:'小爱水果商店',
						MinPrice:20,
						ShippingFee:50,
						type:[
							"水果鲜蔬","烟酒","零食","客户满30减5.免配送费"
						],
						OrderNum:126
					},
					{
						id:6,
						url:require("../../static/image/store-img.png"),
						name:'小爱水果商店',
						MinPrice:20,
						ShippingFee:50,
						type:[
							"水果鲜蔬","烟酒","零食","客户满30减5.免配送费"
						],
						OrderNum:126
					}
				],
				list1:[
					{
						id:1,
						url:require('../../static/image/shop.png'),
						price:30
					},
					{
						id:2,
						url:require('../../static/image/shop.png'),
						price:30
					},
					{
						id:3,
						url:require('../../static/image/shop.png'),
						price:30
					},
					{
						id:4,
						url:require('../../static/image/shop.png'),
						price:30
					},
					{
						id:5,
						url:require('../../static/image/shop.png'),
						price:30
					},
				],
				list3:[
					{
						name:"正品保证",
						url:require("../../static/image/quality.png")
					},
					{
						name:"即刻配送",
						url:require('../../static/image/dispatching.png')
					},
					{
						name:"货到付款",
						url:require('../../static/image/payment.png')
					},
					{
						name:"售后无忧",
						url:require('../../static/image/after-sale.png')
					}
				]
			}
		},
		components:{
			carousel
		},
		onShow() {
			// this.$request.request({
			// 	url: 'productController/findProductList',
			// 	method: 'GET',
			// 	data: {
						
			// 	}	
			// }).then(res => {
			// 	console.log(res)
			// })
		},
		onLoad() {
				// uni.getLocation({
				//     // type: 'wgs84',
				//     success: function (res) {
				//      console.log('当前位置的经度：' + res.longitude);
				//      console.log('当前位置的纬度：' + res.latitude);
				//     }
				//    })
		}
		
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		
	}
	.bar{
		background-image: url(../../static/image/background.png);
		height: 381rpx;
		background-repeat: no-repeat ;
		background-size:100% 100%;
		overflow: hidden;
	}
	.navbar{
		display: flex;
		width: 90%;
		margin: 67rpx auto;
		position: relative;
	}
	.search-navigator{
		display: flex;
		width: 466rpx;
		height: 51rpx;
		border-radius: 25rpx;
		background-color: rgba(234, 233, 233, 100);
	}
	.search{
		padding-top: 11.4rpx;
		margin-left: 22.7rpx;
		width: 32rpx;
		height: 30rpx;
	}
	.text{
		width: 229rpx;
		height: 20rpx;
		font-size: 20rpx;
		margin-top: 15rpx;
		margin-left: 22.1rpx;
		font-weight: 400;
		color: #C0C0C0;
	}
	.location{
		margin-top: 8rpx;
		/* margin-left: 20rpx; */
		width: 40rpx;
		height: 40rpx;
	}	
	.address{
		width: 220rpx;
		margin-left: 13rpx;
		margin-top: 8rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.down{
		width: 30rpx;
		height: 30rpx;
		margin-left: 8rpx;
		margin-top: 10rpx;
	}
	.hot{
		height: 289rpx;
		margin-top: 18rpx;
		background-image: url(../../static/image/hot.png);
		background-repeat: no-repeat ;
		background-size:100% 100%;
	}
	.box{
		width: 90%;
		margin: 0 auto;
	}
	.goods-title{
		display: flex;
	}
	.title{
		margin: 18rpx;
	}
	.title-top{
		width: 272rpx;
		height: 32rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.title-down{
		width: 186rpx;
		height: 22rpx;
		font-size: 23rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 10rpx 0;
	}
	.goods-btn{
		width: 116rpx;
		height: 36rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 18rpx;
		margin-top: 40rpx;
		margin-left: 250rpx;
	}
	.more{
		width: 80rpx;
		height: 16rpx;
		margin: 0 auto;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.goods-img{
		display: flex;
		justify-content:space-between;
	}
	.img{
		width: 129rpx;
		height: 137rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 0rpx 0rpx;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	.shop{
		width: 103rpx;
		height: 105rpx;
		background-repeat: no-repeat ;
		background-size:100% 100%;
	}
	.price{
		width: 129rpx;
		text-align: center;
		background: linear-gradient(-86deg, #F4164A, #F56BCC);
		border-radius: 0 0 22rpx 22rpx;
	}
	.num{
		line-height: 35rpx;
		font-size: 15rpx;
		color: #FFFFFF;
	}
	.guarantee{
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.sever{
		display: flex;
	}
	.sever-img{
		width: 22rpx;
		height: 24rpx;
		margin: 16rpx 14rpx;
		background-repeat: no-repeat ;
		background-size:100% 100%;
	}
	.sever-title{
		width: 126rpx;
		height: 30rpx;
		margin: 17rpx 0;
		font-size: 15rpx;
		font-weight: bold;
		background: linear-gradient(-86deg, #F5164B 0%, #F56CCD 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.recommend{
		width: 92%;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: bold;
	}
	.store{
		width: 95%;
		margin: 0 auto;
		display: flex;
		position: relative;
	}
	.store-img{
		width: 122rpx;
		height: 122rpx;
		background: #E9E9E9;
		border-radius: 10rpx;
		margin: 29rpx 17rpx 37rpx 0;
	}
	.store-overall{
		display: flex;
		width: 81%;
		position: relative;
		border-bottom: 1rpx #F3F3F3 solid;
	}
	.store-message{
		float: left;
	}
	.store-name{
		margin-top: 29rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	.store-scope{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.store-price{
		margin-top: 14rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}
	.store-price span{
		text-decoration: line-through;
	}
	.store-type{
		display: inline-block;
		color: #FAA43D; 
		font-size: 15rpx;
		padding: 0 6rpx;
		margin: 10rpx 8rpx 20rpx 0;
		background: #FCF3E7;
		border-radius: 2rpx;
	}
	.store-right{
		position: absolute;
		top: 20rpx;
		right: 0;
		float: right;
	}
	.distance{
		display: flex;
		margin-top: 20rpx;
		line-height: 28rpx;
	}
	.distance-img{
		width: 24rpx;
		height: 25rpx;
		background-image: url(../../static/image/location-1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.distance-text{
		margin-left: 8rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 600;
		color: #FA2834;
	}
	.order{
		margin-top: 45rpx;
		margin-left: 20rpx;
		text-align: center;
		background: linear-gradient(-86deg, #F41640, #EE4F69);
		border-radius: 4rpx;
	}
	.order-text{
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	.order-num{
		margin-top: 10rpx;
		/* margin-left: 10rpx; */
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
</style>
